O HTML-u wiemy już dość dużo, potrafimy także tworzyć złożone strony. Ciągle jednak brak na nich grafiki i tak istotnego elementu jak odnośniki, bez których nie można stworzyć nawigacji po stronach, czy odesłać czytelnika do zasobów znajdujących się w internecie. Strona bez odnośników jest bardzo uboga. W tej części kursu zajmiemy się tym tematem.
Format adresu URL
Zanim zajmiemy się obrazkami i odnośnikami, musimy zapoznać się ze sposobem budowania adresów internetowych.
Wpisując w przeglądarce adres strony internetowej, informujemy przeglądarkę z jakim serwerem ma się połączyć oraz o jaki plik poprosić. Adres taki nazywa się w skrócie URL (Uniform Resource Locator) i zbudowany jest według wzoru przedstawionego na rys. 1.
Wzór rozpoczyna się od określenia typu protokołu – w przypadku stron internetowych protokół to http (Hypertext Transfer Protocol – protokół określający sposób komunikacji przeglądarki internetowej z serwerem HTTP dostarczającym przeglądarce stron, które ma ona wyświetlić). Następnie podawany jest adres serwera internetowego (np. www.mi.com.pl), po którym znajduje się ścieżka określająca położenie żądanego pliku na serwerze.
Trzeba pamiętać, że ścieżka dostępu do plików podawana jest w stosunku do głównego serwera HTTP – na serwerach uniksowych nazywa się on zazwyczaj {stala}public_html{/stala} i jest umieszczony w katalogu domowym użytkownika (nie trzeba znać dokładnego położenia swojego katalogu domowego) – rys. 2.
Adresy, które poznaliśmy do tej pory, to tak zwane adresy bezwzględne. Określają one dokładny adres położenia pliku na konkretnym serwerze. Często jednak wygodniej korzystać z adresów względnych, które określają położenie plików na bieżącym serwerze względem aktualnie oglądanej strony (rys. 3).
Jeśli plik do którego chcemy się odwołać znajduje się w katalogu powyżej katalogu bieżącego, przejścia w górę dokonuje się za pomocą {stala}../{/stala}. W przypadku ścieżek względnych nie określa się typu protokołu (http) oraz adresu serwera – protokół przyjmowany jest domyślnie na http, adres serwera jest zaś taki sam, jak strony aktualnie oglądanej.
Obrazki
Do umieszczania obrazków na stronach internetowych służy znacznik {html}
- src – adres URL wskazujący na obrazek, który ma zostać wyświetlony przez przeglądarkę w miejscu znacznika,
- alt – tekst alternatywny – wyświetla się, gdy przeglądarka z jakiegoś powodu nie może wyświetlić obrazka,
- height – wysokość obrazka wyrażona w pikselach,
- width – szerokość obrazka wyrażona w pikselach.
Istnieje jeszcze kilka innych atrybutów, z którymi możemy się spotkać w wielu kursach w internecie, jednak są one już przestarzałe i nie powinny być stosowane.
Znacznik {html}
{/html}. Oto przykład umieszczenia obrazka na stronie:
![\"Zdjęcie](\"computer.gif\")
Obrazek z powyższego przykładu znajduje się w tym samym katalogu, co wyświetlający go plik HTML. Jeśli obrazek znajdowałby się na innym serwerze, należy podać pełny adres URL:
![\"Zdjęcie](\"http://adresserwera.pl/katalog/computer.gif\")
Tak jak w przypadku innych znaczników, także ten może być formatowany za pomocą stylów:
![](\"computer.jpg\")
Należy także pamiętać, że obrazki używane na stronach internetowych powinny być zapisane w jednym z następujących formatów:
- GIF (rozszerzenie .gif) – do zapisywania obrazków nienaturalnych, stworzonych przez człowieka (np. elementy wyglądu strony – ramki, tła itd.); pozwala na zapisanie obrazka maksymalnie w 256 kolorach,
- JPEG (rozszerzenia .jpg lub .jpeg) – do zapisywania wszelkiego rodzaju zdjęć; stosuje pełną gamę kolorów, wykorzystując przy tym kompresję stratną (im mniejszy obrazek – czyli im mocniej skompresowany – tym gorsza jego jakość, za to szybciej zostanie przesłany do przeglądarki),
- PNG (rozszerzenie .png) – stosuje kompresję bezstratną, pozwala dobrze zapisać zarówno obrazki stworzone przez człowieka, jak i zdjęcia (niestety nie wszystkie przeglądarki w pełni radzą sobie z tym formatem).
Obrazki mogą być także stosowane jako tło innych elementów strony. W tym celu musimy skorzystać ze stylów. Oto przykład: aby umieścić tło dla całej strony, można w znaczniku body dodać następującą definicję opisującą tło:
Styl background-image przyjmuje jako parametr adres URL, który powinien być umieszczony wewnątrz funkcji URL(). Tło można również zastosować do kontenerów ({html}
Odnośniki
Odnośniki są jednymi z najistotniejszych elementów każdej strony internetowej, bez których niemożliwa byłaby nawigacja po własnej stronie, jak również odwołania do stron zewnętrznych. Na szczęście prawie każda strona internetowa jest zbiorem wielu odnośników (inaczej zwanych linkami). Do tworzenia odnośników służy znacznik {html}…{/html}. Oto najprostsza postać odnośnika:
Magazyn INTERNET
Adres strony do której prowadzi odnośnik, podany jest w parametrze href. Większość odnośników z jakimi spotykamy się w internecie ma właśnie taką postać.
Teoretycznie w adresie można pominąć określenie protokołu, wówczas zostanie on domyślnie ustawiony na HTTP, jednak dobrą praktyką jest podawanie go (oczywiście za wyjątkiem sytuacji w której stosujemy adresy względne).
Poza parametrem href znacznik {html}…{/html} przyjmuje wiele innych parametrów. Z większością z nich zapoznamy się w kolejnych częściach kursu.
Na rys. 4 odnośnik przyjmuje postać napisu (Magazyn INTERNET). Aby utworzyć odnośnik w postaci obrazka, wystarczy, że zamiast napisu między znaczniki {html}{/html} a {html}{/html} wstawimy znacznik {html}
![\"Magazyn](\"mi.gif\")
Rys. 4 demonstruje obie postacie odnośników. W dolnej części obrazka znajduje się wycinek tej samej strony w Internet Explorerze. Dookoła obrazka widać brzydką ramkę. Można ją wyeliminować korzystając ze stylów:
Styl border określa sposób obramowania, wartość none natomiast wyłącza obramowanie wokół danego elementu (w tym wypadku obrazka).
Odnośniki wewnątrz jednego dokumentu
Menu a listy
W dobie XHTML-a menu umieszczane na stronach internetowych powinny być połączeniem list, odnośników oraz stylów. Menu na pewno nie jest tabelą, nie jest też paragrafem, wydaje się być jednak swojego rodzaju listą, czy to opcji, czy podstron.
Ponieważ tworzenie menu w postaci listy wybiega poza ramy tego kursu (gdyż jest w dużej mierze zależne od stylów), zachęcam do odwiedzenia stron http://css.maxdesign.com.au/listamatic/ oraz http://css.maxdesign.com.au/listamatic2/index.htm. Znajduje się tam wiele przykładów menu, które warto przeanalizować.
Poza odnośnikami prowadzącymi czytelnika pomiędzy wieloma stronami internetowymi, istnieją także odnośniki operujące w ramach jednej strony. Pozwalają one na szybkie poruszanie się po elementach danej strony.
Takie odnośniki są także bardzo przydatne dla twórców innych stron – mogą oni odsyłać swoich czytelników bezpośrednio do konkretnego elementu naszej strony, eliminując konieczność poszukiwania treści, do której zostali odesłani. Warto więc ustawiać tak zwane kotwice w pobliżu nagłówków umieszczonych na stronie.
Kotwice tworzy się za pomocą tego samego znacznika co odnośniki, lecz nie używa się w nich parametru href, zamiast tego w parametrze name podaje się nazwę odnośnika. Dodatkowo kotwica jest krótką wersją znacznika {html}…{/html}, nie ma więc znacznika zamykającego:
Po rozmieszczeniu kotwic na stronie możemy stworzyć odnośniki przenoszące do miejsc, na które wskazują kotwice:
Odnośniki
Nazwę kotwicy w odnośniku należy poprzedzić znakiem #. Taki odnośnik przenosi do kotwicy znajdującej się w tym samym pliku HTML co on. Można jednak przenieść do kotwicy znajdującej się na innej stronie:
Odnośniki
Nazwę kotwicy należy podawać po całym adresie URL kierującym do strony, na której kotwica została zamieszczona.
Inne odnośniki
Nie zdołaliśmy opisać wszystkich rodzajów odnośników. Część z nich poznamy wraz z nowymi elementami HTML-a. Na zakończenie jednak chciałbym zwrócić uwagę na kilka spraw:
- Tworząc tak zwany layout (wygląd) strony nie należy stosować tabel. Do tego celu należy wykorzystywać kontenery, paragrafy i inne znaczniki w połączeniu ze stylami (wielu elementom HTML-a można za pomocą stylów nadać obrazkowe tło – zachęcam do nauki CSS).
- Projektując menu korzystajmy z list oraz odnośników (patrz: ramka).
- Zawsze stosujmy parametr alt w tagu {html}
{/html} – wymaga to niewiele większego nakładu pracy, a znacznie polepsza odbiór strony przez użytkowników, którzy korzystają z tekstowych przeglądarek lub w przeglądarce graficznej mają wyłączone pobieranie obrazków.
